<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="550" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // Style settings
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "bold 24px 'Times New Roman', serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const d = 90;
    const wire_start_x = 70;
    const wire_end_x = 430;
    const wire1_y = 120;
    const wire2_y = wire1_y + d;
    const square_x = 170;
    const square_y = wire2_y + d;
    
    // Draw wire 1
    ctx.beginPath();
    ctx.moveTo(wire_start_x, wire1_y);
    ctx.lineTo(wire_end_x, wire1_y);
    ctx.stroke();

    // Draw wire 2
    ctx.beginPath();
    ctx.moveTo(wire_start_x, wire2_y);
    ctx.lineTo(wire_end_x, wire2_y);
    ctx.stroke();

    // Draw square loop
    ctx.strokeRect(square_x, square_y, d, d);

    // Draw labels '1' and '2'
    ctx.fillText('1', wire_start_x - 30, wire1_y);
    ctx.fillText('2', wire_start_x - 30, wire2_y);
    
    // Draw current labels and arrows
    const current_label_x = 200;
    const arrow_pos_x = 230;
    const arrow_len = 15;
    const arrow_head_size = 6;
    
    // Current I on wire 1
    ctx.font = "italic bold 26px 'Times New Roman', serif";
    ctx.fillText('I', current_label_x, wire1_y - 25);
    // Arrow on wire 1
    ctx.beginPath();
    ctx.moveTo(arrow_pos_x, wire1_y);
    ctx.lineTo(arrow_pos_x + arrow_len, wire1_y); // shaft
    ctx.moveTo(arrow_pos_x + arrow_len, wire1_y); // back to tip
    ctx.lineTo(arrow_pos_x + arrow_len - arrow_head_size, wire1_y - arrow_head_size); // head top
    ctx.moveTo(arrow_pos_x + arrow_len, wire1_y); // back to tip
    ctx.lineTo(arrow_pos_x + arrow_len - arrow_head_size, wire1_y + arrow_head_size); // head bottom
    ctx.stroke();


    // Current I on wire 2
    ctx.fillText('I', current_label_x, wire2_y - 25);
    // Arrow on wire 2
    ctx.beginPath();
    ctx.moveTo(arrow_pos_x, wire2_y);
    ctx.lineTo(arrow_pos_x + arrow_len, wire2_y); // shaft
    ctx.moveTo(arrow_pos_x + arrow_len, wire2_y); // back to tip
    ctx.lineTo(arrow_pos_x + arrow_len - arrow_head_size, wire2_y - arrow_head_size); // head top
    ctx.moveTo(arrow_pos_x + arrow_len, wire2_y); // back to tip
    ctx.lineTo(arrow_pos_x + arrow_len - arrow_head_size, wire2_y + arrow_head_size); // head bottom
    ctx.stroke();
    
    // Reset font for distance labels
    ctx.font = "italic bold 24px 'Times New Roman', serif";

    // Draw distance markers 'd'
    const dim_line_x = square_x + d + 60;
    const tick_len = 15;
    
    // d between wire 1 and wire 2
    ctx.beginPath();
    ctx.moveTo(dim_line_x, wire1_y);
    ctx.lineTo(dim_line_x, wire2_y);
    ctx.moveTo(dim_line_x - tick_len / 2, wire1_y);
    ctx.lineTo(dim_line_x + tick_len / 2, wire1_y);
    ctx.moveTo(dim_line_x - tick_len / 2, wire2_y);
    ctx.lineTo(dim_line_x + tick_len / 2, wire2_y);
    ctx.stroke();
    ctx.fillText('d', dim_line_x + 25, (wire1_y + wire2_y) / 2);

    // d between wire 2 and square
    ctx.beginPath();
    ctx.moveTo(dim_line_x, wire2_y);
    ctx.lineTo(dim_line_x, square_y);
    ctx.moveTo(dim_line_x - tick_len / 2, wire2_y);
    ctx.lineTo(dim_line_x + tick_len / 2, wire2_y);
    ctx.moveTo(dim_line_x - tick_len / 2, square_y);
    ctx.lineTo(dim_line_x + tick_len / 2, square_y);
    ctx.stroke();
    ctx.fillText('d', dim_line_x + 25, (wire2_y + square_y) / 2);
    
    // d for square width
    const dim_line_y = square_y + d + 30;
    ctx.beginPath();
    ctx.moveTo(square_x, dim_line_y);
    ctx.lineTo(square_x + d, dim_line_y);
    ctx.moveTo(square_x, dim_line_y - tick_len / 2);
    ctx.lineTo(square_x, dim_line_y + tick_len / 2);
    ctx.moveTo(square_x + d, dim_line_y - tick_len / 2);
    ctx.lineTo(square_x + d, dim_line_y + tick_len / 2);
    ctx.stroke();
    ctx.fillText('d', square_x + d / 2, dim_line_y + 25);

    // Draw Figure caption
    ctx.font = "bold 24px 'Times New Roman', serif";
    ctx.fillText('Fig. 2.30', 250, 500);

</script>
</body>
</html>